<template>
	<div class="noticead">
		<div class="top"></div>
		<!--<mt-header title="公告管理"  class='head' >
		  <router-link to="/home" slot="left">
		     <i class="material-icons left_1" style="color: #fff;">chevron_left</i>
		  </router-link>
		  <mt-button slot='right' style='margin-right: .3rem;'>
		 		<mt-button @click.native="handleClick">
			  	<i class="iconfont icon-shaixuanguolv"></i>
			  	</mt-button>
		    </mt-button>
		   
		  
		  <mt-button slot='right' style='margin-left: 1rem;' @click='add()'>
		  	<i class="iconfont icon-jia"></i>
		  </mt-button>
		</mt-header>-->
		
		<x-header  class='head' :left-options="{backText: ''}">公告管理
		<a slot="right" >
		 		<div @click="handleClick" style="color: #fff;">
			  	<i class="iconfont icon-shaixuanguolv"></i>
			  </div>
		</a>
		</x-header>
		
		<div class="seach">
			<!--<mt-search v-model="value" placeholder='请输入搜索设备统一编号' ></mt-search>-->
			<input type="text" class="search" placeholder="请输入搜索公告名称"/>
		</div>
		
		
		<router-link :to="{path:'/addnotice'}" style='color: #000;'>
		<div class="add" v-show="show">发布公告</div>
		</router-link>
		
		<!--侧边栏-->
		<mt-popup v-model="popupVisible" position="right" style='width: 17rem;height: 100%;'>
			<div class="stop"></div>
			<div class="btn">
				<button class="rec">重置</button>
				<button class="qued">确定</button>
			</div>
			
			<div class="choice">
			<div class="choice-c">
			<span>公告类型</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择公告类型</option>
			  <option value ="主机">会议通告</option>
			  <option value ="配件">奖惩通知</option>
			</select>
			</div>
	        </div>
	        
	        <div class="choice">
			<div class="choice-c">
			<span>公告状态</span>
	        <select class="choice-k">
			  <option value ="请选择设备类型">请选择公告状态</option>
			  <option value ="主机">草稿</option>
			  <option value ="配件">发布</option>
			</select>
			</div>
	       </div>
		</mt-popup>
		<!--侧边栏-->
		<scroller>
			<div class="kong"></div>
			
		<router-link :to="{path:'/loadnotice'}" style='color: #000;'>	
		<div class="system-n"  style="color: #606063;">
			<div class="system-top">
				<p>2.18活动</p>	
				<span><i class="material-icons right" >chevron_right</i></span>
				<span >发布</span>
			</div>
			<div class="system-con">
				<div class="device-l">
					<p>公告类型<span>会议通告</span></p>
					<p>查阅状态<span>2/30</span></p>
					<p style="border-bottom: 0;">创建时间<span style="border-bottom: 0;">2017-09-17</span></p>
				</div>
			</div>
		</div>
		</router-link>
		
		<router-link :to="{path:'/loadnotice'}" style='color: #000;'>	
		<div class="system-n"  style="color: #606063;">
			<div class="system-top">
				<p>2.18活动</p>	
				<span><i class="material-icons right" >chevron_right</i></span>
				<span >发布</span>
			</div>
			<div class="system-con">
				<div class="device-l">
					<p>公告类型<span>会议通告</span></p>
					<p>查阅状态<span>2/30</span></p>
					<p style="border-bottom: 0;">创建时间<span style="border-bottom: 0;">2017-09-17</span></p>
				</div>
			</div>
		</div>
		</router-link>
		

		</scroller>
	</div>
</template>

<script>
import { XHeader } from 'vux'
export default {
  components: {
    XHeader
  },
  data() {
    return {
      popupVisible: false,
      show: false
    }
  },
  methods: {
    handleClick() {
      this.popupVisible = true
    },
    add() {
      this.show = !this.show
    }
  }
}
</script>

<style scoped>
.right {
  line-height: 2.5rem;
}
.iconfont {
  font-size: 1.5rem;
}
.seach {
  height: 3.6rem;
  background: #1e82d2;
  position: fixed;
  top: 4.25rem;
  width: 100%;
  z-index: 99;
}
.search {
  width: 92%;
  margin-left: 4%;
  margin-top: 0.8rem;
  background: #1a72b9;
  border: none;
  height: 2rem;
  text-align: center;
  line-height: 2rem;
  color: #fff;
}
.search::-webkit-input-placeholder {
  color: #fff;
  font-size: 0.8rem;
  line-height: 1.2rem;
}
.btn {
  display: flex;
}
.rec {
  width: 8.5rem;
  border: none;
  height: 2.5rem;
  background: #fff;
  color: #000;
  border-bottom: 1px solid #d4d4d4;
}
.qued {
  width: 8.5rem;
  border: none;
  background: #1e82d2;
  color: #fff;
}
.choice-k option {
  font-size: 0.8rem !important;
}
.choice {
  width: 100%;
  height: 3rem;
  background: #fff;
  border-bottom: 1px solid #f5f5f5;
}
.choice-c {
  padding: 0.5rem 0.5rem 0.5rem 1rem;
}
.choice span {
  line-height: 2rem;
  font-size: 0.8rem;
}
.choice-k {
  width: 60%;
  float: right;
  line-height: 2rem;
  height: 2rem;
  border: none;
  color: #606063;
  font-size: 0.8rem !important;
}
.system-n {
  width: 92%;
  min-height: 3rem;
  background: #fff;
  margin-left: 4%;
  margin-top: 0.5rem;
  border-radius: 6px;
  overflow: hidden;
}
.system-top {
  height: 2.5rem;
  background: #fda470;
  border-radius: 6px 6px 0 0;
  padding-left: 0.5rem;
  padding-right: 0.5rem;
}
.system-top p {
  color: #fff;
  line-height: 2.5rem;
  font-size: 0.8rem;
  float: left;
}
.system-top span {
  float: right;
  line-height: 2.5rem;
  color: #fff;
  font-size: 0.8rem;
  height: 2.5rem;
}
.system-con {
  min-height: 3.8rem;
  padding: 0 0.5rem 0 0.5rem;
}
.device-l p {
  width: 100%;
  line-height: 2rem;
  font-size: 0.8rem;
  border-bottom: 1px solid #f5f5f5;
  float: left;
}
.device-l span {
  line-height: 2rem;
  font-size: 0.8rem;
  float: right;
}
.add {
  text-align: center;
  width: 7rem;
  height: 2rem;
  position: absolute;
  right: 0;
  top: 3.5rem;
  background: #fff;
  line-height: 2rem;
  border-radius: 5px;
  z-index: 99;
}
.stop {
  width: 100%;
  height: 1.25rem;
  background: #1e82d2;
}
.top {
  position: fixed;
  top: 0;
  width: 100%;
  height: 1.25rem;
  background: #1e82d2;
  z-index: 99;
}
.head {
  position: fixed;
  top: 1.25rem;
  width: 100%;
  background: #1e82d2;
  font-size: 1.125rem;
  height: 3rem;
  z-index: 99;
}
.kong {
  height: 7.85rem;
}
</style>